<template>
  <div
    class="d-flex flex-column mb-3"
    :class="msg.senderId === currentUserId ? 'align-end pr-4' : 'align-start pl-4'"
  >
    <!-- 发送者名称（仅显示对方） -->
    <div
      v-if="top_round && msg.senderId !== currentUserId && msg.senderName"
      class="text-caption font-weight-medium text-grey-darken-1 mb-1"
      style="margin-left: 12px;"
    >
      {{ msg.senderName }} - {{ new Date(msg.timestamp).toLocaleString('zh-CN', { hour12: false }) }}
    </div>
    <div
      v-if="top_round && msg.senderId === currentUserId && msg.senderName"
      class="text-caption font-weight-medium text-grey-darken-1 mb-1"
      style="margin-left: 12px;"
    >
      {{ "我" }} - {{ new Date(msg.timestamp).toLocaleString('zh-CN', { hour12: false }) }}
    </div>

    <!-- 消息卡片 -->
    <v-card
      :color="msg.senderId === currentUserId ? 'primary' : 'secondary'"
      :class="[
        msg.senderId === currentUserId ? 'text-white' : 'text-black',
        'pa-3 chat-bubble',
        getRoundedClass()
      ]"
      flat
    >
      {{ msg.content }}
    </v-card>
  </div>
</template>

<script setup lang="ts">
import type { ChatMessage } from '@/stores/app'

const props = defineProps<{
  msg: ChatMessage
  currentUserId: number
  bottom_round: boolean
  top_round: boolean
  showName: boolean
}>()

const getRoundedClass = () => {
  const classes: string[] = []

  const side = props.msg.senderId === props.currentUserId ? 'right' : 'left'

  if (!props.top_round) {
    classes.push(`no-top-${side}-radius`)
  }
  if (!props.bottom_round) {
    classes.push(`no-bottom-${side}-radius`)
  }

  return classes
}
</script>

<style scoped>
.chat-bubble {
  max-width: 70%;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  border-radius: 18px; /* 默认圆角 */
}

.no-top-left-radius {
  border-top-left-radius: 0 !important;
}

.no-top-right-radius {
  border-top-right-radius: 0 !important;
}

.no-bottom-left-radius {
  border-bottom-left-radius: 0 !important;
}

.no-bottom-right-radius {
  border-bottom-right-radius: 0 !important;
}
</style>